<template>
	<view class="v-form-container">
		<view class="v-form-item">
			<!-- 		<view class="v-form-title">分类</view> -->
			<u-grid :border="false" :col="4">
				<u-grid-item v-for="(item,index) in list" :key="index">
					<image style="width: 50px;height: 50px;margin-top: 16rpx;" :src="item.url"
						@click="imageclick(index)"></image>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 	<view class="charts-box v-form-item">
			<qiun-data-charts type="column" style="height: 400rpx;" :chartData="columnData" :echartsH5="true"
				:echartsApp="true" :inScrollView="true" :disableScroll="true" :canvas2d="true" :errorReload="false"
				background="none" />
		</view> -->
		<view class="charts-box v-form-item">
			<view class="fn-title">当前生产订单执行</view>
			<qiun-data-charts style="height: 400rpx;" type="ring" :chartData="chartData" />

		</view>

		<view class="charts-box v-form-item">
			<view class="fn-title">销售接单（台）</view>
			<qiun-data-charts style="height: 400rpx;" type="line" :chartData="lineData" :ontouch="true" />
		</view>
		<view class="charts-box v-form-item">
		</view>
		<view class="charts-box v-form-item">
		</view>


		<vol-tabbar :index="2"></vol-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineData: {
					categories: [],
					series: [{
						name: '',
						data: []
					}]
				},
				/* lineData:{
					categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
					series: [{
					    name: "目标值",
					    data: [35, 36, 31, 33, 13, 34]
					  }, {
					    name: "完成量",
					    data: [18, 27, 21, 24, 6, 28]
					  }]
				}, */
				list: [{
						name: "生产类",
						url: '/static/imgs/rili.png'
					},
					{
						name: "销售",
						url: '/static/imgs/jisuanqi.png'
					},
					{
						name: "财务",
						url: '/static/imgs/qiabao.png'
					},
					{
						name: "采购",
						url: '/static/imgs/dengta.png'
					},
					{
						name: "研发",
						url: '/static/imgs/stat.png'
					},
					{
						name: "备件",
						url: '/static/imgs/img06.png'
					}, {
						name: "服务",
						url: '/static/imgs/img02.png'
					},
					{
						name: "接口",
						url: '/static/imgs/img03.png'
					}
				],
				chartData: {
					"series": [{
						"name": "XX",
						"data": 70
					}]
				},

			}
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			});
			this.chartData.series.splice(0, this.chartData.series.length);
			this.http.get("/api/customer_jr_mobile/get_shuj", {}, true).then((s) => {
				//console.log(s);
				this.lineData.categories.splice(0, this.lineData.categories.length);
				this.lineData.series.splice(0, this.lineData.series.length);
				var ls_data = new Array();
				for (var i = 0; i <= s.jdqs.length - 1; i++) {
					this.lineData.categories.push(s.jdqs[i].dat);
					ls_data.push(s.jdqs[i].numa);
				}
				this.lineData.series.push({
					name: "接单数量",
					data: ls_data
				})

				s.k_type_bl.forEach(x => {
					this.chartData.series.push({
						name: x.models,
						data: Number(x.co),
					})
				})
			});
		},
		methods: {
			rightClick() {},
			imageclick(index) {
				if (index == 0) { //生产计划
					uni.navigateTo({
						url: "/pages/form/form1"
					})
					return;
				}
				this.$toast("你不具备权限！"+index);
			},

		}
	}
</script>

<style lang="less" scoped>
	.v-form-container {
		padding-bottom: 90rpx;
		background: #f9f9f9;
	}

	.v-form-title {
		font-size: 28rpx;
		color: #8f9ca2;
		padding: 4rpx 0 0rpx 20rpx;
	}

	.v-form-item {
		// box-shadow: 1px 1px 9px #efefef;
		margin: 20rpx;
		border: 1px solid #f1f1f1;
		border-radius: 10rpx;
		padding: 20rpx 4rpx;
		background: #FFFFFF;

		.grid-text {
			font-size: 24rpx;
			color: #4f4747;
			margin-top: 8rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
